<template>
<div style="height:100%;">
    <div style="padding:13px;">
        <!-- 多条件 -->
        <el-tabs type="border-card" style="width:100%;height:110px;">
            <el-tab-pane label="搜索条件">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                    <el-form-item label="机构名称: ">
                        <el-select v-model="formInline.basicid" placeholder="-请选择-">
                            <el-option :label="item.jigouname" :value="item.noid" v-for="item in sssd" :key="item.noid">{{item.jigouname}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间: ">
                        <el-col :span="11">
                            <el-date-picker v-model="formInline.datea" type="date" format="yyyy/MM/dd" value-format="yyyy-MM-dd"/>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-date-picker v-model="formInline.dateb" type="date" format="yyyy/MM/dd" value-format="yyyy-MM-dd"/>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="seachFirst" type="success" icon="el-icon-search">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    
        <div style="padding:10px 0px 0px 0px;">
            <div style="padding:20px;background-color:#FFFFFF;">
                <el-button @click="zeng" type="success" size="mini" plain>新增</el-button>
                <el-button @click="cccc" type="primary" size="mini" plain>查看</el-button>
                <el-button @click="edit" type="warning" size="mini" plain>修改</el-button>
                <el-button @click="del" type="danger" size="mini" plain>删除</el-button>
                <el-button @click="refresh" icon="el-icon-refresh-right" size="mini" plain/>
                <el-tabs style="width:100%;">
                    <!-- table列表 -->
                    <el-tab-pane label="列表" style="height:390px;">
                        <el-table :data="tableData" ref="multipleTable" @selection-change="xuan" tooltip-effect="dark"
                            max-height="360px" style="width:100%;" stripe border
                            :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                            <el-table-column type="selection" width="95"/>
                            <el-table-column type="index" label="序号" width="95"/>
                            <el-table-column prop="jigouname" label="机构名称"/>
                            <el-table-column prop="createdate" label="时间"/>
                            <el-table-column prop="rummager" label="检查人"/>
                            <el-table-column prop="inspectionresult" label="检查结果"/>
                        </el-table>
                        <el-pagination background
                            @size-change="seachPages"
                            @current-change="pageSeach"
                            :current-page="formInline.pageNum"
                            :page-sizes="[6,25]"
                            :page-size="formInline.pageSize"
                            layout="total,sizes,prev,pager,next,jumper"
                            :total="total">
                        </el-pagination>
                    </el-tab-pane>
        
                    <!-- 信息列表 -->
                    <el-tab-pane label="信息" style="height:390px;">
                        <div style="height:calc(100vh- 320px);overflow-y:auto;">
                        <div v-for="item in tableData" :key="item.noid" style="box-shadow:0px 10px 13px 0px rgb(50 50 50);">
                            <el-descriptions>
                            <el-descriptions-item label="编号">{{item.noid}}</el-descriptions-item>
                            <el-descriptions-item label="机构名称">
                                <el-tag size="small">{{item.jigouname}}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="时间">{{item.createdate}}</el-descriptions-item>
                            <el-descriptions-item label="检查人">{{item.rummager}}</el-descriptions-item>
                            <el-descriptions-item label="检查结果">{{item.inspectionresult}}</el-descriptions-item>
                            </el-descriptions>
                        </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    
        <!-- 新增 查看 修改 框 -->
        <el-dialog :title="zzz?'新建':ccc?'查看':'修改'" :visible.sync="dialogVisible" width="53%" :modal="false" @close="refresh">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="160px" size="mini" :inline="true">
                <span slot="label"><i class="el-icon-user"></i> 基本信息</span>
                <el-form-item label="机构名称" prop="basicid">
                    <el-select v-model="ruleForm.basicid" :disabled="ccc" placeholder="-请选择-">
                        <el-option v-for="item in sssd" :key="item.noid" :label="item.jigouname" :value="item.noid"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间: " prop="createdate">
                    <el-date-picker v-model="ruleForm.createdate" type="date" format="yyyy/MM/dd" value-format="yyyy-MM-dd" :disabled="ccc"/>
                </el-form-item>
                <el-form-item label="检查人: " prop="rummager">
                    <el-input v-model="ruleForm.rummager" :disabled="ccc" :maxlength="10" show-word-limit/>
                </el-form-item>
                <el-form-item label="检查结果: " prop="inspectionresult">
                    <el-select v-model="ruleForm.inspectionresult" :disabled="ccc" placeholder="-请选择-">
                        <el-option label="完全符合" value="完全符合"/>
                        <el-option label="基本符合" value="基本符合"/>
                        <el-option label="符合要求" value="符合要求"/>
                        <el-option label="不符合要求" value="不符合要求"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="添加人: " v-if="ccc" prop="addpeople">
                    <el-input v-model="ruleForm.addpeople" :disabled="ccc"/>
                </el-form-item>
                <el-form-item label="添加时间: " v-if="ccc" prop="addtime">
                    <el-date-picker v-model="ruleForm.addtime" type="datetime" format="yyyy/MM/dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :disabled="ccc"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确 定</el-button>
                <el-button @click="dialogVisible=false" size="mini">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</div>
</template>
<script>
import axios from 'axios'
export default{
    data(){
        return{
            formInline:{
                basicid:'',     //机构名称
                datea:'',       //时间
                dateb:'',       //时间
                identification:2,   //标识字段
                pageNum:1,
                pageSize:6,
            },
            ruleForm:{
                noid:'',
                basicid:'',         //机构名称
                createdate:'',      //时间
                rummager:'',        //检查人
                inspectionresult:'',        //检查结果
                identification:'',  //标识字段
                addpeople:'',     //添加人
                addtime:'',         //添加时间
            },
            tableData:[],
            sssd:[],
            pages:0,
            total:0,
            pan:true,
            ccc:false,//查看
            zzz:false,//新建
            ggg:false,//修改
            multipleSelection:[],
            dialogVisible:false,
            rules:{
                basicid:[
                    {required:true,message:'请选择机构名称',trigger:'change'}
                ],
                createdate:[
                    {required:true,message:'请选择时间',trigger:'change'}
                ],
                rummager:[
                    {required:true,message:'请输入检查人姓名',trigger:'change'}
                ],
                inspectionresult:[
                    {required:true,message:'请选择检查结果',trigger:'change'}
                ]
            }
        }
    },
    mounted(){
        this.seach();
    },
    methods:{
        submitForm(formName){
            //基本信息
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    if(this.zzz){//新增
                        this.ruleForm.addpeople=this.$store.state.loginuserinfo.userCode;
                        this.ruleForm.identification=2;
                        axios.post("/chain-api/safetymana/addSafetyMana",this.ruleForm).then(res=>{
                            if(res.data.code==1){
                                this.$message({showClose:true,message:"新增成功",type:'success'});
                            }else{
                                this.$message.error({showClose:true,message:"新增失败"});
                            }
                        });
                    }
                    if(this.ggg){//修改
                        axios.post("/chain-api/safetymana/updaSafetyManana",this.ruleForm).then(res=>{
                            if(res.data.code==1){
                                this.$message({showClose:true,message:"修改成功",type:'success'});
                            }else{
                                this.$message.error({showClose:true,message:"修改失败"});
                            }
                        });
                    }
                    this.zzz=false;
                    this.ccc=false;
                    this.ggg=false;
                    this.dialogVisible=false;
                    this.refresh();
                }
            });
        },
        xuan(val){
            this.multipleSelection=[];
            this.multipleSelection=val;
            // console.log(this.multipleSelection);
        },
        zeng(){
            this.zzz=true;
            this.dialogVisible=true;
        },
        cccc(){
            if(this.multipleSelection.length===1){
                for(let i=0;i<this.multipleSelection.length;i++){
                    this.cha(this.multipleSelection[i]);
                }
                this.ccc=true;
                this.dialogVisible=true;
            }else{
                if(this.multipleSelection.length===0){
                    this.$message.error({showClose:true,message:"请至少选择一条数据"});
                }else{
                    this.$message.error({showClose:true,message:"只能选择一条记录!"});
                }
            }
        },
        edit(){
            if(this.multipleSelection.length===1){
                for(let i=0;i<this.multipleSelection.length;i++){
                    this.cha(this.multipleSelection[i]);
                }
                this.ggg=true;
                this.dialogVisible=true;
            }else{
                if(this.multipleSelection.length===0){
                    this.$message.error({showClose:true,message:"请至少选择一条数据"});
                }else{
                    this.$message.error({showClose:true,message:"只能选择一条记录!"});
                }
            }
        },
        del(){//删除
            if(this.multipleSelection.length===0){
                this.$message.error({showClose:true,message:"请至少选择一条数据"});
            }else{
                for(let i=0;i<this.multipleSelection.length;i++){
                    this.shanc(this.multipleSelection[i].noid);
                }
            }
        },
        shanc(key){
            axios.delete("/chain-api/safetymana/delete/"+key).then(res=>{
                if(res.data.code==1){
                    this.$message({showClose:true,message:"删除成功",type:'success'});
                }else{
                    this.$message.error({showClose:true,message:"删除失败"});
                }
                this.refresh();
            }).catch(error=>{
                console.log(error);
            });
        },
        cha(row){//回显
            this.ruleForm.noid=row.noid;
            this.ruleForm.basicid=row.basicid;
            this.ruleForm.createdate=row.createdate;
            this.ruleForm.rummager=row.rummager;
            this.ruleForm.inspectionresult=row.inspectionresult;
            this.ruleForm.addpeople=row.addpeople;
            this.ruleForm.addtime=row.addtime;
        },
        seach(){
            axios.post("/chain-api/safetymana/selectPageInfo",this.formInline).then(res=>{
                this.tableData=res.data.data.safety.list;
                this.sssd=res.data.data.sssd;
                this.pages=res.data.data.safety.pages;
                this.total=res.data.data.safety.total;
            }).catch(error=>{
                console.log(error);
            });
        },
        seachFirst(){
            this.formInline.pageNum=1;
            this.seach();
        },
        pageSeach(val){
            this.formInline.pageNum=val;
            this.seach();
        },
        seachPages(val){
            this.formInline.pageSize=val;
            this.seach();
        },
        refresh(){
            Object.assign(this.$data,this.$options.data());
            this.seach();
        }
    }
}
</script>
<style type="text/css">
</style>